<template>
	<view>
		<!-- <yingbing-video poster="https://img-cdn-tx.dcloud.net.cn/stream/plugin_screens/f6a480a0-de80-11ed-80fb-2170b3a62430_0.png" barrage-show :barrages="barrages" ref="video" title="标题" muted @play="handlePlay" @pause="handlePause" :playbackRate="playbackRate" :src="src" @seizing="handleSeizing" @error="handleError" /> -->
		<yingbing-video
		style="height:500px"
		:poster="poster"
		next-btn-show
		@nextBtnClick="handleNext"
		barrage-show
		:barrages="barrages"
		ref="video"
		:title="title"
		muted
		@play="handlePlay"
		@pause="handlePause"
		:playbackRate="playbackRate"
		:src="src"
		@seizing="handleSeizing"
		@loadeddata="handleLoadeddata"
		@canplay="handleCanplay"
		@error="handleError" />
		<!-- <yingbing-video ref="video" @seizing="handleSeizing" @timeupdate="handleTimeupdate" :duration="0" :flv-config="flvConfig" :controls="controls" :barrage-show="barragesShow" title="测试视频" :src="src" @error="handleError" @fullscreenChange="handleFullscreenChange" />
		<yingbing-video ref="video" @seizing="handleSeizing" @timeupdate="handleTimeupdate" :duration="0" :flv-config="flvConfig" :controls="controls" :barrage-show="barragesShow" title="测试视频" :src="src" @error="handleError" @fullscreenChange="handleFullscreenChange" />
		<button @tap="fullscreen">全屏播放</button>
		<button @tap="seek">重加载</button> -->
		<button @tap="playbackRate = 2.0">设置倍速为1.0</button>
		<button @tap="seek">跳转</button>
		<button @tap="handleDestroy">注销视频</button>
		<button @tap="handleJump">跳转页面</button>
		<view class="danmu"><input class="danmu-input" v-model="danmu" placeholder="想说些什么？" type="text"><button @tap="handleDanmuSubmit">发送</button></view>
	</view>
</template>

<script>
	// import {ref} from 'vue'
	// const src = ref('https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v')
	export default {
		data () {
			return {
				initialTime: 30,
				title: '视频标题',
				poster: 'https://img-cdn-tx.dcLoud.net.cn/dev/img/ext/logo-ext-new.png',
				// src: '',
				// src: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv',
				// src: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
				src: 'https://ydtnt-jw.oss-cn-zhangjiakou.aliyuncs.com/jw-video/%E8%A7%86%E9%A2%91/%E8%8B%B1%E8%AF%AD/%E5%94%90%E8%BF%9F%E8%AF%8D%E6%B1%87%E7%9A%84%E9%80%BB%E8%BE%91%E5%8D%95%E8%AF%8D%E8%AF%BE/Unit1-1_batch.mp4',
				// src: './static/test1.m3u8',
				flvConfig: {
					cors: true,
					hasAudio:false
				},
				barragesShow: true,
				controls: true,
				currentTime: 0,
				playbackRate: 1,
				current: 0,
				danmu: '',
				barrages: []
			}
		},
		onLoad() {
			const barrages = []
			for ( let i = 0; i < 1000; i++ ) {
				barrages.push({
					text: '视频1：这是第' + (i + 1) + '条弹幕',
					color: '#ff0033',
					fontSize: 12,
					time: i * 1
				})
			}
			// this.src = 'https://ydtnt-jw.oss-cn-zhangjiakou.aliyuncs.com/jw-video/%E8%A7%86%E9%A2%91/%E8%8B%B1%E8%AF%AD/%E5%94%90%E8%BF%9F%E8%AF%8D%E6%B1%87%E7%9A%84%E9%80%BB%E8%BE%91%E5%8D%95%E8%AF%8D%E8%AF%BE/Unit1-1_batch.mp4'
			this.barrages = barrages
		},
		onReady () {
			// setTimeout(() => {
			// 	this.src = 'https://ydtnt-jw.oss-cn-zhangjiakou.aliyuncs.com/jw-video/%E8%A7%86%E9%A2%91/%E8%8B%B1%E8%AF%AD/%E5%94%90%E8%BF%9F%E8%AF%8D%E6%B1%87%E7%9A%84%E9%80%BB%E8%BE%91%E5%8D%95%E8%AF%8D%E8%AF%BE/Unit1-1_batch.mp4'
			// }, 1000)
		},
		methods: {
			fullscreen () {
				this.$refs.video.launchFullscreen()
			},
			seek () {
				this.$refs.video.seek(15)
			},
			handleNext () {
				// const arr = [
				// 	'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
				// 	'https://video.ondemandcn.com/98126187b7df4119996c1af834b934d6/d1f5cadf268f401c867746268d350081-10883b4fb481a0ae978efbf06ee4dbf6-ld.m3u8',
				// 	'https://video.sz517.com/asset/f7291070cb6c94a6cfa8e9d5d784d60f/play_video/index.m3u8'
				// ]
				// 切换链接
				const arr = [
					'https://vod.lyhuicheng.com/20240516/zN7aNzzK/index.m3u8',
					'https://vod.lyhuicheng.com/20240516/iKuGAFdb/index.m3u8'
				]
				if( this.current < arr.length - 1 ) this.current++
				else this.current = 0
				const barrages = []
				for ( let i = 0; i < 1000; i++ ) {
					barrages.push({
						text: '视频' + this.current + '：这是第' + (i + 1) + '条弹幕',
						color: '#ff0033',
						fontSize: 12,
						time: i * 1
					})
				}
				
				this.src = arr[this.current]
				this.barrages = barrages
			},
			handleCanplay (e) {
				console.log('canplay', e);
			},
			handleLoadeddata (e) {
				const num = 1000
				this.$refs.video.seek(num)
			},
			handleError (e) {
				console.log('error', e);
			},
			handleDestroy () {
				this.$refs.video.stop()
			},
			handleFullscreenChange (e) {
				if ( e.fullscreen ) {
					this.controls = true
				} else {
					this.controls = false
				}
			},
			handleTimeupdate (e) {
				this.currentTime = e.currentTime
				console.log('e', e);
			},
			handleSeizing () {
				console.log('seizing');
			},
			handlePlay () {
				// this.barrageTimer = setInterval(() => {
				// 	this.$refs.video.drawBarrage([{
				// 		text: '这是一条实时弹幕',
				// 		color: '#ff0033',
				// 		fontSize: 12
				// 	},{
				// 		text: '这是一条实时弹幕',
				// 		color: '#ff0033',
				// 		fontSize: 12
				// 	},{
				// 		text: '这是一条实时弹幕',
				// 		color: '#ff0033',
				// 		fontSize: 12
				// 	},{
				// 		text: '这是一条实时弹幕',
				// 		color: '#ff0033',
				// 		fontSize: 12
				// 	},{
				// 		text: '这是一条实时弹幕',
				// 		color: '#ff0033',
				// 		fontSize: 12
				// 	},{
				// 		text: '这是一条实时弹幕',
				// 		color: '#ff0033',
				// 		fontSize: 12
				// 	},{
				// 		text: '这是一条实时弹幕',
				// 		color: '#ff0033',
				// 		fontSize: 12
				// 	},{
				// 		text: '这是一条实时弹幕',
				// 		color: '#ff0033',
				// 		fontSize: 12
				// 	},{
				// 		text: '这是一条实时弹幕',
				// 		color: '#ff0033',
				// 		fontSize: 12
				// 	}])
				// }, 2000)
			},
			handlePause () {
				// clearInterval(this.barrageTimer)
				// this.barrageTimer = null
			},
			handleDanmuSubmit () {
				if ( !this.danmu ) return
				this.$refs.video.drawBarrage({
					text: this.danmu,
					color: '#ff0033',
					fontSize: 20
				})
				this.danmu = ''
			},
			handleJump () {
				uni.navigateTo({
					url: '/pages/index/test'
				})
			}
		}
	}
</script>

<style>
	.danmu {
		display: flex;
	}
	.danmu-input {
		flex: 1;
		border: 1px solid #eee;
		height: 45px;
	}
</style>